<template>
    <div class="layout" :class="{'layout-system':isSystem}">
        <div class="layout-header">
            <div class="logo">
                <router-link to="/index">
                    <img src="/static/logo.png">
                    <span>达飞监察管理系统</span>
                </router-link>
            </div>
            <div class="header-inner">
                <div class="user-info">
                    <div class="info" v-if="userInfo.name">
                        <i class="icon i-user"></i>
                        <em>你好，</em>
                        <span class="role" :title="userInfo.roleName">{{userInfo.roleName.split(' ').length>2?userInfo.roleName.split(' ')[0]+'...':userInfo.roleName}}</span>
                        <div class="dropdown">
                            <div class="dropdown-toggle">
                                <span :data-id="userInfo.id">{{userInfo.name}}</span>
                                <i class="icon i-caret-down"></i>
                            </div>
                            <div class="dropdown-menu">
                                <a class="menu-item" @click="showEditLayer">修改密码</a>
                            </div>
                        </div>
                    </div>
                    <div class="remind">
                        <router-link to='/message' class="icon i-remind has-remind">
                            <span></span>
                        </router-link>
                    </div>
                    <div class="logout" @click="logout" title="退出">
                        <i class="icon i-logout"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="layout-content">
            <div class="layout-aside">
                <aside-menu></aside-menu>
            </div>
            <div class="layout-wrapper">
                <bread-crumb></bread-crumb>
                <router-view/>
            </div>
        </div>
        <!-- 修改密码 -->
        <layer :data="editLayerData" @on-cancel="closeEditLayer" @on-ok="editLayerConfirm">
            <el-form>
                <el-form-item label="原密码" class="is-required">
                    <el-input type="password" v-model="editLayerData.form.oldPassWord" auto-complete="off" placeholder="请输入原密码"></el-input>
                </el-form-item>
                <el-form-item label="新密码" class="is-required">
                    <el-input type="password" v-model="editLayerData.form.password" auto-complete="off" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item label="重复密码" class="is-required">
                    <el-input type="password" v-model="editLayerData.password2" auto-complete="off" placeholder="请输入重复密码"></el-input>
                </el-form-item>
            </el-form>
        </layer>
    </div>
</template>
<script>
    import '@/assets/less/modules/layout.less'
    import asideMenu from '@/components/asideMenu'
    import breadCrumb from '@/components/breadCrumb'
    import layer from '@/components/layer'
    export default {
        name: 'layout',
        data() {
            return {
                editLayerData: {
                    show: false,
                    title: '修改密码',
                    form: {},
                    password2: ''
                }
            }
        },
        computed: {
            userInfo() {
                return this.$store.getters.userInfo
            },
            isSystem() {
                return this.$store.state.common.isSystem
            }
        },
        components: {
            asideMenu,
            breadCrumb,
            layer
        },
        created() {
        },
        methods: {
            // 退出
            logout() {
                this.$store.dispatch('loginOut', (res) => {
                    this.$router.replace('/login')
                })
                // this.$router.replace({
                //     path: '/login',
                //     query: { redirect: this.$router.currentRoute.fullPath }
                // })
            },
            // 修改密码layer
            showEditLayer() {
                this.editLayerData.show = true
            },
            // 关闭修改密码layer
            closeEditLayer() {
                this.editLayerData.show = false
                this.editLayerData.form = {}
                this.editLayerData.password2 = ''
            },
            // 修改密码提交
            editLayerConfirm() {
                if (!this.editLayerData.form.oldPassWord) {
                    this.$msg.error('请输入原密码')
                    return false
                }
                if (!this.editLayerData.form.password) {
                    this.$msg.error('请输入新密码')
                    return false
                }
                if (this.editLayerData.form.password != this.editLayerData.password2) {
                    this.$msg.error('新密码与重复密码不一致')
                    return false
                }
                api.updateUserPassword(this.editLayerData.form).then(res => {
                    this.$msg.success('修改密码成功')
                    this.$store.dispatch('clearUserInfo', () => {
                        this.closeEditLayer()
                        this.$router.replace('/login')
                    })
                }).catch(res => {
                    console.log(res)
                })
            }
        }
    }
</script>